<!DOCTYPE html>
<html>
<head>
#include("/admin/_common/head.html")
<title>部门列表</title>
</head>
<body class="pear-container">
    <div class="layui-panel query-panel /*查询面板*/">
        <form id="main-form" class="layui-form layui-row layui-col-space16" lay-filter="main-form" onsubmit="return false;">
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="pear-icon pear-icon-text"></i>
					</div>
					<input type="text" name="word" value="#(word??)" placeholder="模糊查询" autocomplete="off" class="layui-input" lay-affix="clear">
				</div>
		    </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-btn-group">
                    <button id="main-form-search" type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button id="main-form-reset" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div class="layui-panel table-panel /*表格面板*/">
        <table id="main-table"></table>
        <script id="main-pagebar" type="text/html">
        </script>
    </div>


#include("../../_common/data_table_template.html")
#include("../../_common/foot.html")

<script type="text/javascript">
layui.use(['jquery'], () => {
    let $ = layui.jquery;

    //定义表格模块基本参数
    let module = {
        type: TABLE_TYPE.treeTable,             //表格类型：树状表格
        idField: 'id',                          //表格中 id 的字段名（与数据库定义的要一致，如userId）
        name: '行政部门',                        //表格模块的业务名称
        path: '#CTX()/admin/system/dept/',      //表格模块的操作路径，以 '/' 结尾
    };

    //定义查询表单基本参数
    let queryForm = {
        id: 'main-form',                        //查询面板中 form 表单的 id 属性
        searchButtonId: 'main-form-search',     //查询面板中搜索按钮的 id 属性
        resetButtonId: 'main-form-reset',       //查询面板中重置按钮的 id 属性
    };

    //定义编辑对话框基本参数
    let editDialog = {
        submitFormId: 'edit-form',              //编辑页面（模态）中 form 表单的 ID 属性
        submitButtonId: 'submit-button',        //编辑页面（模态）中提交按钮的 ID 属性
        width: '720px',                         //对话框宽度
        height: '95%',                          //对话框高度
    };

    //定义表格操作基本参数
    let actions = {
        //#authPermissions('system:department:add')
        addFlag: true, addUrl: module.path + 'add',
        addChildFlag: true, addChildUrl: module.path + 'add',
        //#end
        //#authPermissions('system:department:edit')
        editFlag: true, editUrl: module.path + 'edit',
        //#end
        //#authPermissions('system:department:del')
        removeFlag: true, removeUrl: module.path + 'delete',
        //#end
        //#authPermissions('system:department:query')
        detailFlag: true, detailUrl: module.path + 'detail',
        //#end
        expandTreeFlag: true,
        foldTreeFlag: true,
        //事件处理
        handleEvent: (options, event, obj) => {
        },
        //回调处理
        callbackEvent: (options, event, result) => {
        },
    };

    //定义数据表格的 options，参考：https://layui.dev/docs/2/table/#options
    let options = {
        id: 'main-table',                                   //设定实例唯一索引
        elem: '#main-table',                                //绑定原始 table 元素
        title: module.name,                                 //定义 table 的大标题（在文件导出等地方会用到）
        url: module.path + 'query',                         //发送异步请求的 URL
        initSort: {'field': 'sort', 'type': 'asc'},         //初始排序状态
        toolbar: $.table.buildTableToolbar(actions),        //开启表格头部工具栏
        page: false,                                        //关闭分页
        cols: [[                                            //表头属性集
            {type: 'checkbox', align: 'center', width: 60},
            {field: 'status', align: 'center', width: 80, title: '状态', templet: '#bean-status'},
            //{field: 'id', align: 'center', width: 80, title: 'ID'},
            //{field: 'ancestors', align: 'left', width: 80, title: '祖先ID'},
            {field: 'name', align: 'left', minWidth: 250, width: '30%', title: '名称'},
            {field: 'sort', align: 'center', width: 100, title: '排序'},
            {field: 'createdDatetime', align: 'center', width: 160, title: '创建时间', templet: '#bean-createdDatetime'},
            {align: 'left', minWidth: 240, templet: $.table.buildRowToolbar(actions)},
        ]],
        module: module,             //表格模块基本参数
        queryForm: queryForm,       //查询表单基本参数
        editDialog: editDialog,     //编辑对话框基本参数
        actions: actions,           //表格操作基本参数
    };

    $(document).ready(() => {
        /**
         * 初始化数据表格
         */
        options = $.table.init(options);
    });

});
</script>
</body>
</html>
